<template>
  <div>
     <el-row :gutter="12">
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">干预总数量</h3>
            <h4 style="margin:10px;color:#40EFFF"><font size="5">{{zongCount}}</font> 例</h4>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="100"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">昨日干预总数量</h3>
            <h4 style="margin:10px;color:#FF0505"><font size="5">{{zuoCount}}</font> 例</h4>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="75" status="success"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">昨日本人干预总数量</h3>
            <h4 style="margin:10px;color:#E9760B"><font size="5">{{zuoSalfCount}}</font> 例</h4>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="50" status="warning"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">今日总干预数量</h3>
            <h4 style="margin:10px;color:#FF4080"><font size="5">{{jinCount}}</font> 例</h4>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="25" status="exception"></el-progress>
          </el-card>
        </el-col>
     </el-row>
     <div class="block" style="margin:29px">
        <span class="demonstration">选择统计图显示的天数：</span>
        <select v-model="displayNum" style="margin-right:20px" @change="changeNum">
          <option value="7">7天</option>
          <option value="9">9天</option>
          <option value="11">11天</option>
          <option value="13">13天</option>
          <option value="15">15天</option>
        </select>
        <span class="demonstration">选择统计图的结束日期：</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          @input="changeDate">
        </el-date-picker>
      </div>
    <div id="chartLineBox" style="width: 99%;height: 500px;"></div>
    <div id="chartLineBox1" style="width: 99%;height: 500px;margin-top:23px"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'WorkCount',
  data () {
    return {
      chartLine: null, // 干预div对象
      schemeDate: [], // 干预日期数组
      schemeTotal: [], // 干预总量数组
      personTotal: [], // 本人干预总量数组
      chartLine1: null, // 回访div对象
      diaryDate: [], // 回访日期数组
      diaryTotalCount: 0,
      diaryTotal: [], // 回访总数量数组
      salfTotal: [], // 本人回访总数量
      // 日期选择器
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value2: '',
      displayNum: 7,
      jinCount: 0, // 今日干预量
      zuoCount: 0, // 昨日干预量
      zuoSalfCount: 0, // 昨日本人干预量
      zongCount: 0 // 总干预量
    }
  },
  methods: {
    chartTu () {
      this.chartLine = echarts.init(document.getElementById('chartLineBox'))
      let _this = this

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '干预工作量统计'
        },
        tooltip: {// 设置tip提示
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {// 设置区分（哪条线属于什么）
          data: ['干预总量', '本人干预量']
        },
        color: ['#8AE09F', '#F56C6C'], // 设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {// 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: _this.schemeDate,
          name: '日期', // X轴 name
          nameTextStyle: {// 坐标轴名称的文字样式
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {// 坐标轴轴线相关设置。
            lineStyle: {
              color: '#FA6F53'
            }
          }
        },
        yAxis: {
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53'
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '干预总量',
            data: _this.schemeTotal,
            type: 'line', // 类型为折线图
            lineStyle: {// 线条样式 => 必须使用normal属性
              normal: {
                color: '#8AE09F'
              }
            }
          },
          {
            name: '本人干预量',
            data: _this.personTotal,
            type: 'line',
            lineStyle: {
              normal: {
                color: '#F56C6C'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option)
    },
    chartTu1 () {
      this.chartLine1 = echarts.init(document.getElementById('chartLineBox1'))
      let _this = this

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '回访工作量统计'
        },
        tooltip: {// 设置tip提示
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {// 设置区分（哪条线属于什么）
          data: ['回访总量', '本人回访量']
        },
        color: ['#FC40FF', '#4053FF'], // 设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {// 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: _this.diaryDate,
          name: '日期', // X轴 name
          nameTextStyle: {// 坐标轴名称的文字样式
            color: 'red',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {// 坐标轴轴线相关设置。
            lineStyle: {
              color: '#303133'
            }
          }
        },
        yAxis: {
          name: '回访量（回访总量 ' + this.diaryTotalCount + ' 例）',
          nameTextStyle: {
            color: 'red',
            fontSize: 16,
            padding: [10, 0, 0, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#303133'
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '回访总量',
            data: _this.diaryTotal,
            type: 'line', // 类型为折线图
            lineStyle: {// 线条样式 => 必须使用normal属性
              normal: {
                color: '#FC40FF'
              }
            }
          },
          {
            name: '本人回访量',
            data: _this.salfTotal,
            type: 'line',
            lineStyle: {
              normal: {
                color: '#4053FF'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine1.setOption(option)
    },
    // 获取日期的方法
    beforeDays (num, date) {
      // 设置日期，当前日期的前num天
      let myDate = new Date(date) // 获取输入的日期
      myDate.setDate(myDate.getDate() - (num - 1))
      let dateArray = []
      let myMonth = myDate.getMonth() + 1
      if (myMonth >= 1 && myMonth <= 9) {
        myMonth = '0' + myMonth
      }
      let myDates = myDate.getDate()
      if (myDates >= 0 && myDates <= 9) {
        myDates = '0' + myDates
      }
      let dateTemp
      let flag = 1
      for (let i = 0; i < num; i++) {
        dateTemp = myDate.getFullYear() + '-' + myMonth + '-' + myDates
        dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
      }
      return dateArray[0]
    },
    // 改变日期时间触发
    changeDate () {
      // 重新查
      this.queryInter()
    },
    // 改变天数触发
    changeNum () {
      this.queryInter()
    },
    // 查询干预各个信息
    queryInter () {
      let date = []
      let dang = new Date()
      for (let index = 1; index <= this.displayNum; index++) {
        if (this.value2 === '') {
          date.unshift(this.beforeDays(index, dang))
        } else {
          date.unshift(this.beforeDays(index, this.value2))
        }
      }
      this.$axios.post(`/api/DHCountMemberController/queryIntervention?dates=${date}&hmId=${this.$store.state.user.hmId}`).then(({data}) => {
        this.schemeTotal = []
        this.personTotal = []
        this.schemeDate = date
        this.schemeTotal = data.schemeTotal
        this.personTotal = data.personTotal
        this.chartTu()
      })
      this.$axios.post(`/api/DHCountMemberController/queryReturnCount?dates=${date}&hmId=${this.$store.state.user.hmId}`).then(({data}) => {
        this.diaryTotal = []
        this.salfTotal = []
        this.diaryDate = date
        this.diaryTotalCount = data.diaryTotalCount[0]
        this.diaryTotal = data.diaryTotal
        this.salfTotal = data.salfTotal
        this.chartTu1()
      })
      this.queryInterventionInfo()
    },
    // 查询总干预量和昨天干预量和今天干预量
    queryInterventionInfo () {
      let dang = new Date()
      let jin = this.beforeDays(1, dang)
      let zuo = this.beforeDays(2, dang)

      this.$axios.post(`/api/DHCountMemberController/queryInterventionInfo?hmId=${this.$store.state.user.hmId}&jin=${jin}&zuo=${zuo}`).then(({data}) => {
        this.jinCount = data.jinCount
        this.zuoCount = data.zuoCount
        this.zuoSalfCount = data.zuoSalfCount
        this.zongCount = data.zongCount
      })
    }
  },
  created () {
    this.queryInter()
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
